import React, { Component } from 'react';
import {
  StyleSheet, Text, View, TextInput, ScrollView, TouchableOpacity, DeviceEventEmitter, Alert, Image,
} from 'react-native';
import { Icon } from 'native-base';
import produce from 'immer';
import DeviceInfo from 'react-native-device-info';
import ImagePicker from 'react-native-image-crop-picker';
import theme from '../../../native-base-theme/variables';
import ZlstIcon from '../../../components/zlst-icons';
import { ipConfig } from '../../../services/config';
import * as inspectionService from '../../../services/inspection';
import * as todoService from '../../../services/todo';

import { FormText, FormShowphoto } from '../../../components';

class TaskDeviceDetail extends Component {
  static navigationOptions = {
    title: '设备点巡检详情',
    headerStyle: { backgroundColor: theme.toolbarDefaultBg, borderBottomWidth: 0, elevation: 0 },
    headerTintColor: '#FFFFFF',
    headerTitleStyle: {
      fontWeight: 'bold',
      fontSize: 20,
      flex: 1,
      textAlign: 'center',
    },
    headerBackImage: (
      <ZlstIcon
        name="fanhui"
        size={24}
        color="white"
      />
    ),
    headerRight: <View />,
  }

  failurePic = '';

  constructor(props) {
    super(props);
    this.state = {
      equipmentName: '',
      equipmentCode: '',
      checkDate: '',
      checkOrgName: '',
      checkType: '',
      checkUser: '',
      emsEcmCheckspots: [],
      endTime: '',
      remark: '',
      result: '',
      startTime: '',
      status: '',
      images: [],
    };
  }

  componentDidMount() {
    this.getDeviceInspectInfo();
  }

  componentWillUnmount() {
    ImagePicker.clean().then(() => {
      console.log('removed all tmp images from tmp directory');
    }).catch(e => {
      console.log(e);
    });
  }

  // 获取巡检任务设备信息
  getDeviceInspectInfo = async () => {
    try {
      DeviceEventEmitter.emit('showLoading', true);
      const { equipcheckId } = this.props.navigation.state.params;
      const data = await inspectionService.getSpotRecordByEquipCheckId({ equipCheckId: equipcheckId });
      DeviceEventEmitter.emit('showLoading', false);
      if (data) {
        this.setState(produce(draft => {
          // eslint-disable-next-line no-restricted-syntax
          draft.equipmentName = data.equipmentName;
          draft.equipmentCode = data.equipmentCode;
          draft.equipCreateTime = data.equipCreateTime;
          draft.checkOrgName = data.checkOrgName;
          draft.checkType = data.checkType;
          draft.checkUser = data.checkUser;
          draft.emsEcmCheckspots = data.emsEcmCheckspots;
          draft.endTime = data.endTime;
          draft.remark = data.remark;
          draft.result = data.result;
          draft.startTime = data.startTime;
          draft.status = data.status;
          draft.images = data.images.map(imgFieldId => ({ uri: `${ipConfig.url(todoService.imageUrl)}${imgFieldId}?token=${global.__TOKEN_ACCESS__}` }));
        }));
      }
    } catch (e) {
      console.log(e);
      DeviceEventEmitter.emit('showLoading', false);
      this.props.navigation.goBack();
    }
  }

  showBigImage = () => {
    DeviceEventEmitter.emit('showBigImage', { show: true, url: this.state.images[0].uri });
  }

  render() {
    return (
      <ScrollView style={{ flex: 1, backgroundColor: theme.myPrimary }}>
        <View style={styles.container}>
          <View style={{ backgroundColor: 'rgba(255,255,255,0.2)', paddingTop: 4, paddingBottom: 4, borderRadius: 4 }}><FormText name="设备信息" /></View>
          <FormText name="编码" value={this.state.equipmentCode} />
          <FormText name="名称" value={this.state.equipmentName} />
          <View style={{ backgroundColor: 'rgba(255,255,255,0.2)', paddingTop: 4, paddingBottom: 4, borderRadius: 4 }}><FormText name="基础信息" /></View>
          <FormText name="巡检人" value={this.state.checkUser} />
          <FormText name="巡检班组" value={this.state.checkOrgName} />
          <FormText name="巡检日期" value={this.state.equipCreateTime} />
          <FormText name="巡检类型" value={this.state.checkType} />
          <FormText name="开始时间" value={this.state.startTime} />
          <FormText name="结束时间" value={this.state.endTime} />
          <FormText name="巡检状态" value={this.state.status} />
          <View style={{ backgroundColor: 'rgba(255,255,255,0.2)', paddingTop: 4, paddingBottom: 4, borderRadius: 4 }}><FormText name="巡检项" /></View>
          {
            this.state.emsEcmCheckspots.map((data, index) => (
              <FormText key={index} name={data.name} value={`${data.result}      ${data.resultDesc == null ? '' : data.resultDesc}`} />
            ))
          }
          <View style={{ backgroundColor: 'rgba(255,255,255,0.2)', paddingTop: 4, paddingBottom: 4, borderRadius: 4 }}><FormText name="巡检结果" /></View>
          <FormText name="结果" value={this.state.result} />
          <FormText name="备注" value={this.state.remark} />
          <View style={{ backgroundColor: 'rgba(255,255,255,0.2)', paddingTop: 4, paddingBottom: 4, borderRadius: 4 }}><FormText name="图片" /></View>
          <FormShowphoto
            datas={this.state.images}
            showBigImage={this.showBigImage}
          />
        </View>
      </ScrollView>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: theme.myPrimary,
  },
  _button: {
    borderRadius: 2,
    textAlignVertical: 'center',
    padding: 5,
    margin: 5,
    color: 'white',
    textAlign: 'center',
    borderWidth: 1,
    borderStyle: 'solid',
  },
  footer: {
    width: '100%',
    flexDirection: 'column',
    backgroundColor: theme.myPrimary,
    height: 48,
  },
});

export default TaskDeviceDetail;
